    <div id="header">
        <div id="user-bar" class="navigation">
            <ul>
                <li><a href="/">Home</a></li>
                <li>|</li>
                {% if user.is_authenticated %}
                  <li>Welcome! {{user.username}}</li>
                  <li>|</li>
                  <li><a href="/cart/" id="cart_url">My Cart({{amount|default:0}})</a></li>
                  <li>|</li>
                  <li><a href="/user_panel/">My GoGoWu</a></li>
                  <li>|</li>
                  <li><a href="/logout/">Logout</a></li>
                {% else %}
                  <li><a href="/login/">Login</a></li>
                  <li>|</li>
                  <li><a href="/register/">Register</a></li>
                  <li>|</li>
                {% endif %}
                <li><a href="">Help</a></li>
            </ul>
        </div><!-- the end for user-bar -->
        <div id="logo">
            <a href="/"><img src="/site_media/images/logo.png" alt="GoGoWu logo"/></a>
        </div><!-- the end for logo -->
        <div id="top-navigation">
            <div id="top-nav-left"></div>
            <div id="top-nav">
                <div id="top-menu-div" class="navigation">
                    <ul>
                        <li class="top-menu-item"><a href='/search/?category=Mobile'>Mobile</a></li>
                        <li class="menu-bar">|</li>
                        <li class="top-menu-item"><a href='/search/?category=Computer'>Computer</a></li>
                        <li class="menu-bar">|</li>
                        <li class="top-menu-item"><a href='/search/?category=Computer+Accessories'>Computer Accessories</a></li>
                        <li class="menu-bar">|</li>
                        <li class="top-menu-item"><a href='/search/?category=Camera'>Camera</a></li>
                        <li class="menu-bar">|</li>
                        <li class="top-menu-item"><a href='/search/?category=Audio Digital'>Audio Digital</a></li>
                    </ul>                
                </div><!-- the end for top-menu-div -->
                <div id="top-search-bar">
                    <form name="search-form" action="/search" method="get">
                        <input type="text" name="searchkeyword" id="search-text" size="40" />
                        <input type="image" src="/site_media/images/search-button.gif" id="search-button" style="position:absolute" />
                        <span id="top-cart-bar">
                            <a href="/cart/"><span id="cart-bar-info"><font color="#7f7fff"><b id="items_amount">{{ amount|default:0 }}</b></font> good in cart </span><span id="cart-go-button">&nbsp;</span></a>
                        </span>
                    </form>
                </div><!-- the end for top-search-bar -->
            </div><!-- the end for top-nav -->
            <div id="top-nav-right"></div>
        </div><!-- the end for top-navigation -->
    </div><!-- the end header -->